<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style>
        .static{
            font-weight: bold;
        }
        .active{
            color: #7f00ff;
        }
        .text-danger{
            color: red;
            position: relative;
            left:5px;
        }
        .text-danger:before{
            color: red;
            position: absolute;
            left: -8px;
            content: "* ";
            top:2px;
        }
    </style>
</head>
<body>
<div id="example" class="static"
     v-bind:class="classObject">
    {{ message }}
</div>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: '#example',
        data:{
            message:"Hello LZUGIS",
            isActive:false,
            hasError:true
        },
        computed: {
            classObject: function () {
                return {
                    active: this.isActive && !this.hasError,
                    'text-danger': this.hasError
                }
            }
        }
    })
</script>
</body>
</html>